<script setup lang="ts">
    import mains from '@/components/main.vue';
    import { ref } from 'vue';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css'; // 引入样式
// 表单数据
const formData = ref({
  title: '',
  thumbnail: '',
  author: '',
  content: '',
  status: false,
  uploadTime: null
});

// 上传地址，需替换为实际后端接口地址
const uploadUrl = ref('/api/upload'); 

// 上传前处理，可用于校验文件类型等
const beforeUpload = (file:any) => {
  console.log('上传前处理，当前文件：', file);
  return true; // 允许上传，可按需添加条件判断
};

// 富文本编辑器配置
const editorConfig = ref({
  placeholder: '请输入内容'
});

// 保存文章方法
const saveArticle = () => {
  console.log('保存文章数据：', formData.value);
  // 实际开发中调用后端接口保存数据
  // 示例：
  // import axios from 'axios';
  // axios.post('/api/saveArticle', formData.value)
  // .then(response => {
  //     console.log('保存成功', response);
  //   })
  // .catch(error => {
  //     console.error('保存失败', error);
  //   });
};
const editorOptions = ref({
  theme: 'snow',
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
      ['blockquote', 'code-block'], // 引用 代码块
      [{ header: 1 }, { header: 2 }], // 标题
      [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表 无序列表
      [{ script: 'sub' }, { script: 'super' }], // 下标 上标
      [{ indent: '-1' }, { indent: '+1' }], // 减少缩进 增加缩进
      [{ direction: 'rtl' }], // 文字方向
      [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
      [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题级别
      [{ color: [] }, { background: [] }], // 字体颜色 背景颜色
      [{ font: [] }], // 字体
      [{ align: [] }], // 对齐方式
      ['clean'], // 清除格式
      ['link', 'image', 'video'] // 链接 图片 视频
    ]
  }
});// 取消方法
const cancel = () => {
  console.log('取消操作');
  // 可添加重置表单等逻辑
};
</script>
<template>
    <div style="width: 100%;">
        <mains :title="'新增文章'"></mains>
        <Card style="width: 98%; margin: 0 auto;">
            <template #title>
                <h5>编辑文章信息</h5>
            </template>
            <div class="article-form-container">
                <Form :model="formData" :label-width="100">
                <FormItem label="文章标题" prop="title">
                    <Input v-model="formData.title" placeholder="请输入内容" />
                </FormItem>
                <FormItem label="上传缩略图" prop="thumbnail">
                    <Upload :action="uploadUrl" :before-upload="beforeUpload" :show-file-list="false">
                    <Button type="dashed" icon="plus">点击上传</Button>
                    </Upload>
                </FormItem>
                <FormItem label="作者" prop="author">
                    <Input v-model="formData.author" placeholder="请输入内容" />
                </FormItem>
                <FormItem label="文章内容" prop="content">
                    <QuillEditor v-model="formData.content" :options="editorOptions" />

                </FormItem>
                <FormItem label="文章状态" prop="status">
                    <Switch v-model="formData.status" />
                </FormItem>
                <FormItem label="上传时间" prop="uploadTime">
                    <DatePicker v-model="formData.uploadTime" type="date" placeholder="请选择日期" />
                </FormItem>
                <div class="form-buttons">
                    <Button type="primary" @click="saveArticle">保存</Button>
                    <Button @click="cancel">取消</Button>
                </div>
                </Form>
            </div>
        </Card>
    </div>
        
</template>
<style scoped>
    .article-form-container {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 4px;
}
.form-buttons {
  margin-top: 20px;
  text-align: right;
}
</style>